<template>
  <div>
    <div class="search-title">
      <van-icon
        name="arrow-left"
        @click="onClickLeft"
      />
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        shape:round
        @input="onInput"
      >
        <template #action>
          <div @click="onSeacrh">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!--  -->
      <div
        v-if="value"
      >
        <div
          v-for="(item, i) in searchList"
          :key="i"
          class="search-content"
        >
          <van-icon name="search" />
          <div v-html="highLight([item, value])" />
        </div>
      </div>
      <!--  -->
      <van-cell-group
        v-if="history.some(item => true) && !value"
      >
        <van-cell
          class="historySearch"
          title="历史记录"
        >
          <template #right-icon>
            <van-icon
              name="delete-o"
              @click="removeAll"
            />
          </template>
        </van-cell>
        <van-cell
          v-for="(item, i) in history"
          :key="i"
          :title="item"
        >
          <template #right-icon>
            <van-icon
              name="close"
              @click="onRemove(item)"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'SearchPage',
  data() {
    return {
      value: '',
      history: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    onSeacrh() {
      if (!this.history.includes(this.value) && this.value.trim() !== '') {
        this.history.push(this.value)
      }
    },
    ...mapActions('search', [
      'updateSearchList'
    ]),
    onInput(value) {
      if (value !== '') {
        this.updateSearchList(value);
      }
    },
    onRemove(item) {
      this.history = this.history.filter(l => l !== item)
    },
    removeAll() {
      this.history = []
    },
    highLight([title, searchWord]) {
      // 如果标题中包含，关键字就替换一下
      if (title.includes(searchWord)) {
        title = title.replace(
          searchWord,
          // 这里是替换成html格式的数据，最好再加一个样式权重，保险一点
          '<font style="color:red!important;">' + searchWord + '</font>'
        )
        return title
      }
    }
  },
  computed: {
    ...mapState('search', [
      'searchList'
    ]),
  }
}
</script>

<style lang="less">
.search-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  i {
    margin-left: 10px;
  }
  .van-search {
    width: 90%;
    .van-search__content {
      border-radius: 12px;
    }
  }
}
.van-cell {
  display: flex;
  align-items: center;
  span:first-child {
    color: #aaa;
  }
}
.search-content {
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  div {
    margin-left: 5px;
  }
}
</style>
